---
title: "Security"
description: "Best practices for protecting plugin tokens and sensitive data"
icon: Shield
---

## Plugin Token Protection

Developers may worry that sensitive tokens defined in the `hot-updater.config.ts` file might be bundled into the app and exposed in production.

Using environment variables is simply for populating the token value in the `hot-updater.config.ts` file. This is, in fact, unrelated to React Native.

```ts title="hot-updater.config.ts"
import { bare } from "@hot-updater/bare";
import { supabaseDatabase, supabaseStorage } from "@hot-updater/supabase";
import { defineConfig } from "hot-updater";
import { config } from "dotenv";

config({ path: ".env.hotupdater" });

export default defineConfig({
  build: bare({ enableHermes: true }),
  storage: supabaseStorage({
    supabaseUrl: process.env.HOT_UPDATER_SUPABASE_URL!,
    supabaseAnonKey: process.env.HOT_UPDATER_SUPABASE_ANON_KEY!,
    bucketName: process.env.HOT_UPDATER_SUPABASE_BUCKET_NAME!,
  }),
  database: supabaseDatabase({
    supabaseUrl: process.env.HOT_UPDATER_SUPABASE_URL!,
    supabaseAnonKey: process.env.HOT_UPDATER_SUPABASE_ANON_KEY!,
  }),
});

```

## Clarification

The `hot-updater.config.ts` file is not included in the app’s build. Instead, it serves as a configuration layer specifically for communicating with the `hot-updater` CLI. As a result, sensitive tokens defined in this file are not part of the distributed application code.

What is actually included in the app’s build is as follows:
```ts
import { HotUpdater } from "hot-updater";

export default HotUpdater.wrap({
  baseURL: "https://<your-update-server-url>",
  updateStrategy: "appVersion", // or "fingerprint",
  updateMode: "auto",
});
```

Here, the source URL is included in the app code, but sensitive environment variables, such as `HOT_UPDATER_SUPABASE_ANON_KEY` tokens, are not bundled.

## Potential Token Exposure

<Callout type="warn">
If you're **not** using react-native-dotenv, tokens won't be included in your app by default. This is a guideline for projects using react-native-dotenv.

Using tools like react-native-dotenv can expose sensitive tokens in your app build. To avoid this, only include non-sensitive or publicly safe variables in your configuration.
</Callout>

If you’re using tools like `react-native-dotenv` to read environment variables and inject them into the app during runtime, sensitive tokens might be exposed. To avoid this, ensure that only non-sensitive or publicly safe data is included in your app build.

### Example: If you are using `react-native-dotenv` Babel Configuration

To ensure safe handling of environment variables, you can whitelist only the necessary variables using `react-native-dotenv` in your Babel configuration:
```js title="babel.config.js"
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'hot-updater/babel-plugin',
    [
      'module:react-native-dotenv',
      {
        envName: 'APP_ENV',
        allowlist: ['HOT_UPDATER_SUPABASE_ANON_KEY', 'HOT_UPDATER_CLOUDFLARE_API_TOKEN'], ❌ Do not add private keys to allowlist // [!code --]
        allowlist: ['HOT_UPDATER_SUPABASE_URL'], // ✅ Only add public keys that are safe to expose to allowlist // [!code ++]
        path: '.env.hotupdater', // ✅ Use .env.hotupdater file separate from .env file
      },
    ],
  ],
};
```

## Best Practices

1. Restrict Exposure: Only include environment variables that are safe for public access in your app build.
2. Use Whitelists: Use tools like react-native-dotenv to define a whitelist of allowed environment variables.
3. Keep Sensitive Data Out of Builds: Store sensitive data securely on your server or backend, and ensure it is only accessed during server-side operations.
4. Use `react-native-keys` to manage keys.
